<template lang="pug">
.video-transition-frame(v-if='isShow && videoUrl')
  canvas#canvas1
  video#video1(
    :style="styleObj",
    autoplay,
    preload,
    :src="videoUrl",
    webkit-playsinline='true',
    playsinline='true',
    x5-playsinline='true',
    ref="videoWrap")

</template>

<script>
import { replaySceneOrBgMusic } from '@/utils/audio'

export default {
  data() {
    return {
      isShow: false,
      videoUrl: '',
      nextScene: null,
      isEnded: false,
      durationTime: 0,
      preloadTime: 1, // 提取1秒加载
      timerId: null,
      timerId2: null,
      ctx: null,
      styleObj: {
        width: document.documentElement.clientWidth + 'px !important',
        height: document.documentElement.clientHeight + 'px !important'
      }
    }
  },
  mounted() {

    this.$vgo.on('iframe:transiton-video', data => {
      this.isShow = true
      this.nextScene = data.sceneId
      let tempVideo = data.videoUrl
      if(tempVideo.indexOf('http') === -1) {
        tempVideo = $globalconfig.URLS.API + tempVideo
      }
      this.videoUrl = tempVideo
      // console.log(this.videoUrl)

      setImmediate(() => {
        const v = document.getElementById("video1")
        const c = document.getElementById("canvas1")
        const ctx = c.getContext('2d')
        c.width = document.documentElement.clientWidth
        c.height = document.documentElement.clientHeight

        // console.log(v)

        v.addEventListener('play', () => {
          this.$vgo.emit('vr:show', false)
          this.timerId2 = window.setInterval(() => {
            ctx.drawImage(v, 0, 0, v.offsetWidth, v.offsetHeight, 0, 0, c.width, c.height)
          }, 20)
        })
      })

      setTimeout(() => {
        if (this.$refs.videoWrap) {
          // console.log(this.$refs.videoWrap)
          this.$refs.videoWrap.play()
        }
      }, 100)

      setTimeout(() => {
        if (this.getDurationTime) {
          // console.log('22-------------')
          this.videoEnd()
        }
      }, 1000)
    })
  },
  computed: {
    getVideo() {
      if(this.videoUrl) {
        return this.videoUrl
      }
    },
    getEnded () {
      if(this.$refs.videoWrap) {
        return this.$refs.videoWrap.ended
      }
    },
    getDurationTime () {
      if(this.$refs.videoWrap) {
        this.durationTime = Math.floor(this.$refs.videoWrap.duration) || 10
        return this.durationTime
      }
    }
  },
  methods: {
    videoEnd() {
      // console.log('23-------------')
      clearInterval(this.timerId)
      this.timerId = setInterval(() => {
        this.durationTime--
        this.preloadScene()

        if (this.getEnded || this.durationTime <= 0) {
          clearInterval(this.timerId)
          clearInterval(this.timerId2)

          this.closeVideo()
          this.$vgo.emit('vr:hide', false)
        }
      }, 1000)
    },
    preloadScene() {
      // if(this.durationTime <= this.preloadTime) {
      //   this.$vgo.emit('sync:scene', this.nextScene)
      // }
      this.$vgo.emit('sync:scene', this.nextScene)
    },
    closeVideo() {
      // console.log('24------------------')
      this.isShow = false
      // 重新播放音频
      replaySceneOrBgMusic()
    }
  }
}
</script>

<style lang="stylus">

.video-transition-frame
  position: fixed
  left: 0
  right: 0
  top: 0
  bottom: 0
  z-index: 9
  background-color: #000
  #canvas1, #video1
    position: absolute
    left: 0
    top: 0
  #canvas1
    z-index: 2
  #video1
    z-index: -1
    opacity: 0
</style>
